<!DOCTYPE html>
<html  lang="zh">
<head>
    <!-- hexo-inject:begin --><!-- hexo-inject:end --><meta charset="utf-8" />

<meta name="generator" content="Hexo 3.9.0" />

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />

<title>shader学习2-基础光照 - 游戏人生</title>


    <meta name="description" content="shade学习">
<meta name="keywords" content="学习">
<meta property="og:type" content="article">
<meta property="og:title" content="shader学习2-基础光照">
<meta property="og:url" content="http://cloundgame.gitee.io/mystudy/2020/02/18/shader学习2-基础光照/index.html">
<meta property="og:site_name" content="游戏人生">
<meta property="og:description" content="shade学习">
<meta property="og:locale" content="zh-CN">
<meta property="og:image" content="http://cloundgame.gitee.io/mystudy/images/og_image.png">
<meta property="og:updated_time" content="2020-02-21T08:17:04.998Z">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="shader学习2-基础光照">
<meta name="twitter:description" content="shade学习">
<meta name="twitter:image" content="http://cloundgame.gitee.io/mystudy/images/og_image.png">







<link rel="icon" href="/mystudy/images/favicon.svg">


<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.7.2/css/bulma.css">
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/font-awesome/5.9.0/css/all.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Ubuntu:400,600|Source+Code+Pro">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/highlight.js@9.12.0/styles/atom-one-dark.css">


    
    
    
    <style>body>.footer,body>.navbar,body>.section{opacity:0}</style>
    

    
    
    
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/lightgallery@1.6.8/dist/css/lightgallery.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/justifiedGallery@3.7.0/dist/css/justifiedGallery.min.css">
    

    
    

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/outdatedbrowser@1.1.5/outdatedbrowser/outdatedbrowser.min.css">


    
    
    
    

<link rel="stylesheet" href="/mystudy/css/back-to-top.css">


    
    

    
    
    
    

    
    
<link rel="stylesheet" href="/mystudy/css/progressbar.css">
<script src="https://cdn.jsdelivr.net/npm/pace-js@1.0.2/pace.min.js"></script>

    
    
    
        <script async="" src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
    

    


<link rel="stylesheet" href="/mystudy/css/style.css"><!-- hexo-inject:begin --><!-- hexo-inject:end -->
</head>
<body class="is-3-column">
    <!-- hexo-inject:begin --><!-- hexo-inject:end --><nav class="navbar navbar-main">
    <div class="container">
        <div class="navbar-brand is-flex-center">
            <a class="navbar-item navbar-logo" href="/mystudy/">
            
                <img src="/mystudy/images/logo.svg" alt="shader学习2-基础光照" height="28">
            
            </a>
        </div>
        <div class="navbar-menu">
            
            <div class="navbar-start">
                
                <a class="navbar-item"
                href="/mystudy/">主页</a>
                
                <a class="navbar-item"
                href="/mystudy/archives">日志</a>
                
                <a class="navbar-item"
                href="/mystudy/categories">分类</a>
                
                <a class="navbar-item"
                href="/mystudy/">关于</a>
                
            </div>
            
            <div class="navbar-end">
                
                    
                    
                    <a class="navbar-item" target="_blank" title="Download on GitHub" href="https://github.com/koliy/koliy.github.io">
                        
                        <i class="fab fa-github"></i>
                        
                    </a>
                    
                
                
                <a class="navbar-item is-hidden-tablet catalogue" title="目录" href="javascript:;">
                    <i class="fas fa-list-ul"></i>
                </a>
                
                
                <a class="navbar-item search" title="搜索" href="javascript:;">
                    <i class="fas fa-search"></i>
                </a>
                
            </div>
        </div>
    </div>
</nav>
    
    <section class="section">
        <div class="container">
            <div class="columns">
                <div class="column is-8-tablet is-8-desktop is-6-widescreen has-order-2 column-main"><div class="card">
    
    <div class="card-content article ">
        
        <div class="level article-meta is-size-7 is-uppercase is-mobile is-overflow-x-auto">
            <div class="level-left">
                <time class="level-item has-text-grey" datetime="2020-02-18T09:43:52.000Z">2020-02-18</time>
                
                <div class="level-item">
                <a class="has-link-grey -link" href="/mystudy/categories/shade学习/">shade学习</a>
                </div>
                
                
                <span class="level-item has-text-grey">
                    
                    
                    11 分钟 读完 (大约 1677 个字)
                </span>
                
                
                <span class="level-item has-text-grey" id="busuanzi_container_page_pv">
                    <i class="far fa-eye"></i>
                    <span id="busuanzi_value_page_pv">0</span>次访问
                </span>
                
            </div>
        </div>
        
        <h1 class="title is-size-3 is-size-4-mobile has-text-weight-normal">
            
                shader学习2-基础光照
            
        </h1>
        <div class="content">
            <h2 id="Unity中的基础光照"><a href="#Unity中的基础光照" class="headerlink" title="Unity中的基础光照"></a><strong>Unity中的基础光照</strong></h2><p><strong>渲染总是围绕一个基础问题:我们如何决定一个像素的颜色？</strong><br><strong>渲染包含了2大部分：决定一个像素的可见性，决定这个像素的光照计算。而光照模型就是用于决定在一个像素上进行怎样的光照计算</strong></p>
<a id="more"></a>
<h2 id="如何看到这个世界"><a href="#如何看到这个世界" class="headerlink" title="如何看到这个世界"></a><strong>如何看到这个世界</strong></h2><p>当我们描述“这个物体是红色的”时，实际上是因为这个物体反射更多的红光波长，而吸收了其它波长。当描述“这个物体是黑色”时，实际上是因为它吸收了绝大部分的波长。<br><strong>因此unity要模拟真实的物体颜色，需要光照</strong><br><strong>要模拟真实的光照环境来生成一张图像，需要考虑3种物理现象</strong></p>
<ul>
<li>首先，光线从光源中发射出来</li>
<li>然后，光线和场景中的物体相交：一些光线被物体吸收(折射)，而另一些光线被反射到其它方向(显示颜色)</li>
<li>最后，摄像机吸收了一些光，产生了一张图像</li>
</ul>
<h2 id="漫反射"><a href="#漫反射" class="headerlink" title="漫反射"></a><strong>漫反射</strong></h2><p>漫反射(diffuse),表示为有多少光线会被折射，吸收和散射出表面。</p>
<h2 id="高光反射"><a href="#高光反射" class="headerlink" title="高光反射"></a><strong>高光反射</strong></h2><p>高光反射(specular),表示为物体表面如何反射光线</p>
<h2 id="光照模型"><a href="#光照模型" class="headerlink" title="光照模型"></a><strong>光照模型</strong></h2><p>光照模型就是用于描述光线和物体表面相交时的过程，例如，当光线从某个方向照射到一个物体表面时，有多少光线反射，反射的方向有哪些。</p>
<h4 id="1-1-标准光照模型"><a href="#1-1-标准光照模型" class="headerlink" title="1.1 标准光照模型"></a><strong>1.1 标准光照模型</strong></h4><p>把进入摄像机的光线分为4部分：</p>
<ul>
<li><strong>自发光(emissive)：</strong>描述当给定一个方向时，一个物体表面本身会向该方向发射多少辐射量。如果没有开启全局光照(GI)技术，这些自发光表面不会照亮周围物体，只是本身看起来更亮。</li>
<li><strong>高光反射(specular):</strong> 描述当光线从光源照射到物体表面，该表面在反射方向散射多少辐射量。</li>
<li><strong>漫反射(diffuse):</strong> 描述当光线从光源照射到物体表面，会折射，吸收多少辐射量</li>
<li><strong>环境光(ambient):</strong> 描述物体周围其它的所有间接光照</li>
</ul>
<h4 id="1-2-环境光"><a href="#1-2-环境光" class="headerlink" title="1.2 环境光"></a><strong>1.2 环境光</strong></h4><p>在标准光照模型中，我们使用一种称为环境光的部分来近似模拟间接光照，环境光的计算很简单，它通常是一个全局变量，既场景中所有物体都使用这个环境光：<br>$$<br>C_{ambient} = G_{ambient}<br>$$<br><strong>unity中，场景的环境光可以在LightSetting里面设置</strong><br><strong>shader中，使用unity的内置变量就可以获得环境光的颜色和强度：</strong></p>
<figure class="highlight javascript hljs"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">UNITY_LIGHTMODEL_AMBIENT</span><br></pre></td></tr></table></figure>

<h4 id="1-3-漫反射"><a href="#1-3-漫反射" class="headerlink" title="1.3 漫反射"></a><strong>1.3 漫反射</strong></h4><h6 id="1-Lambert模型"><a href="#1-Lambert模型" class="headerlink" title="1. Lambert模型"></a><strong>1. Lambert模型</strong></h6><p>漫反射光照符合兰伯特定律(Lambert),因此我们一般都用Lambert公式计算漫反射光照部分:<br>$$<br>C_{diffuse} = (C_{light}·M_{diffuse})max(0,normal·I)<br>$$</p>
<ul>
<li><strong>normal:  表示表面法线。</strong></li>
<li><strong>I:  表示指向光源的单位矢量。</strong></li>
<li><strong>$M_{diffuse}$:  表示材质的漫反射颜色</strong></li>
<li><strong>$C_{light}$:  表示光源颜色</strong></li>
</ul>
<p><strong>为了防止n法线和I光源方向点乘的结果为负，因此用max截取到0，可以防止物体被从后面来的光源照亮</strong><br><strong>shader中用saturate(x)公式替代max</strong></p>
<figure class="highlight javascript hljs"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">saturate(x)</span><br><span class="line">x: 为用于操作的标量或矢量，类型为float，float2，float3等</span><br><span class="line">描述：把x截取在[<span class="hljs-number">0</span>,<span class="hljs-number">1</span>]范围内</span><br></pre></td></tr></table></figure>

<figure class="highlight javascript hljs"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br></pre></td><td class="code"><pre><span class="line"><span class="hljs-comment">// Upgrade <span class="hljs-doctag">NOTE:</span> replaced 'mul(UNITY_MATRIX_MVP,*)' with 'UnityObjectToClipPos(*)'</span></span><br><span class="line"></span><br><span class="line">Shader <span class="hljs-string">"MyTest/testdiffuse"</span>&#123;</span><br><span class="line">	Properties&#123;</span><br><span class="line">		_Diffuse(<span class="hljs-string">"Diffuse Color"</span>,Color)=(<span class="hljs-number">1.0</span>,<span class="hljs-number">1.0</span>,<span class="hljs-number">1.0</span>,<span class="hljs-number">1.0</span>)</span><br><span class="line">	&#125;</span><br><span class="line"></span><br><span class="line">	SubShader&#123;</span><br><span class="line">		Tags&#123;<span class="hljs-string">"RenderType"</span>=<span class="hljs-string">"Opaque"</span> &#125;</span><br><span class="line">		Pass&#123;</span><br><span class="line">			Tags&#123;<span class="hljs-string">"LightMode"</span>=<span class="hljs-string">"ForwardBase"</span>&#125;</span><br><span class="line"></span><br><span class="line">			CGPROGRAM</span><br><span class="line">			#include "UnityCG.cginc"</span><br><span class="line">			#include "Lighting.cginc"</span><br><span class="line"></span><br><span class="line">			fixed4 _Diffuse;</span><br><span class="line">			#pragma vertex vert</span><br><span class="line">			#pragma fragment frag</span><br><span class="line"></span><br><span class="line">			struct i2v&#123;</span><br><span class="line">				float4 vertex:POSITION;</span><br><span class="line">				float3 normal:NORMAL;</span><br><span class="line"></span><br><span class="line">			&#125;;</span><br><span class="line"></span><br><span class="line">			struct v2f&#123;</span><br><span class="line">				float4 pos:SV_POSITION;</span><br><span class="line">				fixed3 color:COLOR;</span><br><span class="line">			&#125;;</span><br><span class="line"></span><br><span class="line">			v2f vert(i2v i)&#123;</span><br><span class="line">				v2f v ;</span><br><span class="line">				v.pos = UnityObjectToClipPos(i.vertex);</span><br><span class="line">				fixed3 ambient = UNITY_LIGHTMODEL_AMBIENT.xyz;</span><br><span class="line">				fixed3 worldnormal =normalize( UnityObjectToWorldNormal(i.normal));</span><br><span class="line">				<span class="hljs-comment">//fixed3 worldlight = normalize(WorldSpaceLightDir(i.vertex));</span></span><br><span class="line">				fixed3 worldlight = normalize(_WorldSpaceLightPos0.xyz);</span><br><span class="line">				fixed3 diffuse = _LightColor0.rgb * _Diffuse.rgb * saturate(dot(worldnormal,worldlight));</span><br><span class="line">				v.color = ambient + diffuse;</span><br><span class="line">				<span class="hljs-keyword">return</span> v;</span><br><span class="line">			&#125;</span><br><span class="line"></span><br><span class="line">			fixed4 frag(v2f v):SV_Target&#123;</span><br><span class="line">			</span><br><span class="line">				<span class="hljs-keyword">return</span> fixed4(v.color,<span class="hljs-number">1.0</span>);</span><br><span class="line">			&#125;</span><br><span class="line">			ENDCG</span><br><span class="line">		&#125;</span><br><span class="line">	&#125;</span><br><span class="line"></span><br><span class="line">	Fallback <span class="hljs-string">"Diffuse"</span></span><br><span class="line"></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<ul>
<li><strong>_LightColor0: 光源的颜色和强度信息，需要包含Lighting.cginc</strong></li>
<li><strong>_WorldSpaceLightPos0: 光源方向，只用于单个光源且类型是平行光时正确，场景有多个光源类型可能是点光源等时，不能得到正确的结果</strong></li>
<li><strong>UnityObjectToClipPos：返回裁剪空间中的顶点位置</strong></li>
</ul>
<h6 id="2-HalfLambert模型"><a href="#2-HalfLambert模型" class="headerlink" title="2. HalfLambert模型"></a><strong>2. HalfLambert模型</strong></h6><p>逐顶点光照会出现一些视角问题，物体的背光面和向光交界处有一些锯齿，一般使用逐像素的漫反射光照，但是在光照无法到达的区域，模型外观通常是全黑的，没有任何明暗变化，背光面看起来像个平面，为了解决这个缺点：使用<strong>半兰伯特光照模型(HalfLambert)</strong></p>
<p>$$<br>C_{diffuse} = (C_{light}·M_{diffuse})(0.5(normal·I)+0.5)<br>$$</p>
<figure class="highlight javascript hljs"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">fixed3 halflambert = dot(worldnormal,worldlight)*<span class="hljs-number">0.5</span>+<span class="hljs-number">0.5</span>;</span><br></pre></td></tr></table></figure>

<h4 id="1-4-高光反射"><a href="#1-4-高光反射" class="headerlink" title="1.4 高光反射"></a><strong>1.4 高光反射</strong></h4><p>用于计算沿着物体表面完全反射的光线，这可以让物体看起来是有光泽的，例如金属材质。<br><strong>高光反射一般有2中模型计算公式:</strong></p>
<h6 id="1-Phone模型"><a href="#1-Phone模型" class="headerlink" title="1. Phone模型"></a><strong>1. Phone模型</strong></h6><p>$$<br>C_{specular} = (C_{light}·M_{specular})max(0,v·r)^g<br>$$</p>
<ul>
<li><strong>$M_{glass}:$  表示材质的光泽度，也就是反光度。用于控制高光区域的亮点</strong></li>
<li><strong>v:  表示指向视角方向的单位矢量。</strong></li>
<li><strong>r:  表示反射方向的单位矢量。</strong></li>
<li><strong>$M_{specular}$:  表示材质的高光反射颜色</strong></li>
<li><strong>$C_{light}$:  表示光源颜色</strong></li>
</ul>
<p><strong>shader中用reflect(i,n)公式来计算反射方向</strong></p>
<figure class="highlight javascript hljs"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">reflect(i,n)</span><br><span class="line">i: 光源入射方向，光源指向顶点的方向，n: 法线方向 。类型为float，float2，float3等</span><br></pre></td></tr></table></figure>

<figure class="highlight javascript hljs"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line">fixed4 frag(v2f v):SV_Target&#123;</span><br><span class="line">	fixed3 ambient = UNITY_LIGHTMODEL_AMBIENT.xyz;</span><br><span class="line">	<span class="hljs-comment">//fixed3 worldlight = normalize(WorldSpaceLightDir(i.vertex));</span></span><br><span class="line">	fixed3 worldlight = normalize(_WorldSpaceLightPos0.xyz);</span><br><span class="line">	fixed3 worldnormal = normalize(v.worldnomal);</span><br><span class="line">	</span><br><span class="line">	fixed3 diffuse = _LightColor0.rgb * _Diffuse.rgb * saturate(dot(worldnormal,worldlight));</span><br><span class="line"></span><br><span class="line">	fixed3 view = normalize(WorldSpaceViewDir(v.vertex));</span><br><span class="line">	fixed3 reflectdir = normalize(reflect(-worldlight,worldnormal));</span><br><span class="line">	fixed3 specular= _LightColor0.rgb * _Specular.rgb *pow(saturate(dot(view,reflectdir)),_Glass);</span><br><span class="line">	<span class="hljs-keyword">return</span> fixed4(ambient + diffuse+specular,<span class="hljs-number">1.0</span>);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<ul>
<li><strong>WorldSpaceViewDir：返回世界空间中，顶点指向camera视角方向</strong></li>
<li><strong>reflect：需要的是光源指向顶点的方向，所以-worldlight</strong></li>
</ul>
<h6 id="2-Blinn-Phone模型"><a href="#2-Blinn-Phone模型" class="headerlink" title="2. Blinn-Phone模型"></a><strong>2. Blinn-Phone模型</strong></h6><p>它的思想是避免计算反射方向r，通过对v视角方向和I光源方向的平均化再归一化取得新的矢量h来和法线n点乘的公式：<br>$$ h=\frac{V+I}{|V+I|}$$</p>
<p>$$<br>C_{specular} = (C_{light}·M_{specular})max(0,n·h)^g<br>$$</p>
<figure class="highlight javascript hljs"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">fixed3 Blinnphonedir = normalize(view+worldlight);</span><br><span class="line">fixed3 specular= _LightColor0.rgb * _Specular.rgb *pow(saturate(dot(worldnormal,Blinnphonedir)),_Glass);</span><br></pre></td></tr></table></figure>

<p><strong>Blinn-Phone模型的高光反射部分更大，更亮，大部分我们选择Blinn-phone光照模式</strong></p>

        </div>
        
        <div class="level is-size-7 is-uppercase">
            <div class="level-start">
                <div class="level-item">
                    <span class="is-size-6 has-text-grey has-mr-7">#</span>
                    <a class="has-link-grey -link" href="/mystudy/tags/学习/">学习</a>
                </div>
            </div>
        </div>
        
        

        
        <div class="social-share"></div>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/social-share.js@1.0.16/dist/css/share.min.css">
<script src="https://cdn.jsdelivr.net/npm/social-share.js@1.0.16/dist/js/social-share.min.js"></script>
        
    </div>
</div>





<div class="card card-transparent">
    <div class="level post-navigation is-flex-wrap is-mobile">
        
        <div class="level-start">
            <a class="level level-item has-link-grey  article-nav-prev" href="/mystudy/2020/02/20/shader学习3-基础纹理/">
                <i class="level-item fas fa-chevron-left"></i>
                <span class="level-item">shader学习3-基础纹理</span>
            </a>
        </div>
        
        
        <div class="level-end">
            <a class="level level-item has-link-grey  article-nav-next" href="/mystudy/2019/09/08/设计模式-命令模式/">
                <span class="level-item">设计模式-命令模式</span>
                <i class="level-item fas fa-chevron-right"></i>
            </a>
        </div>
        
    </div>
</div>


</div>
                




<div class="column is-4-tablet is-4-desktop is-3-widescreen  has-order-1 column-left ">
    
        
<div class="card widget">
    <div class="card-content">
        <nav class="level">
            <div class="level-item has-text-centered" style="flex-shrink: 1">
                <div>
                    
                        <img class="image is-128x128 has-mb-6" src="/mystudy/images/avatar2.jpg" alt="满头大汉老黄牛">
                    
                    
                    <p class="is-size-4 is-block">
                        满头大汉老黄牛
                    </p>
                    
                    
                    <p class="is-size-6 is-block">
                        游戏
                    </p>
                    
                    
                    <p class="is-size-6 is-flex is-flex-center has-text-grey">
                        <i class="fas fa-map-marker-alt has-mr-7"></i>
                        <span>火星</span>
                    </p>
                    
                </div>
            </div>
        </nav>
        <nav class="level is-mobile">
            <div class="level-item has-text-centered is-marginless">
                <div>
                    <p class="heading">
                        文章
                    </p>
                    <p class="title has-text-weight-normal">
                        70
                    </p>
                </div>
            </div>
            <div class="level-item has-text-centered is-marginless">
                <div>
                    <p class="heading">
                        分类
                    </p>
                    <p class="title has-text-weight-normal">
                        10
                    </p>
                </div>
            </div>
            <div class="level-item has-text-centered is-marginless">
                <div>
                    <p class="heading">
                        标签
                    </p>
                    <p class="title has-text-weight-normal">
                        3
                    </p>
                </div>
            </div>
        </nav>
        <div class="level">
            <a class="level-item button is-link is-rounded" href="https://github.com/koliy/" target="_blank">
                关注我</a>
        </div>
        
        
        <div class="level is-mobile">
            
            <a class="level-item button is-white is-marginless" target="_blank"
                title="Github" href="https://github.com/koliy/">
                
                <i class="fab fa-github"></i>
                
            </a>
            
        </div>
        
    </div>
</div>
    
        


    
        
<div class="card widget">
    <div class="card-content">
        <div class="menu">
            <h3 class="menu-label">
                分类
            </h3>
            <ul class="menu-list">
            <li>
        <a class="level is-marginless" href="/mystudy/categories/3D数学基础-图形与游戏开发/">
            <span class="level-start">
                <span class="level-item">3D数学基础:图形与游戏开发</span>
            </span>
            <span class="level-end">
                <span class="level-item tag">3</span>
            </span>
        </a></li><li>
        <a class="level is-marginless" href="/mystudy/categories/AI/">
            <span class="level-start">
                <span class="level-item">AI</span>
            </span>
            <span class="level-end">
                <span class="level-item tag">12</span>
            </span>
        </a></li><li>
        <a class="level is-marginless" href="/mystudy/categories/MySql/">
            <span class="level-start">
                <span class="level-item">MySql</span>
            </span>
            <span class="level-end">
                <span class="level-item tag">1</span>
            </span>
        </a></li><li>
        <a class="level is-marginless" href="/mystudy/categories/SurfaceShader/">
            <span class="level-start">
                <span class="level-item">SurfaceShader</span>
            </span>
            <span class="level-end">
                <span class="level-item tag">1</span>
            </span>
        </a></li><li>
        <a class="level is-marginless" href="/mystudy/categories/Unity/">
            <span class="level-start">
                <span class="level-item">Unity</span>
            </span>
            <span class="level-end">
                <span class="level-item tag">1</span>
            </span>
        </a></li><li>
        <a class="level is-marginless" href="/mystudy/categories/git/">
            <span class="level-start">
                <span class="level-item">git</span>
            </span>
            <span class="level-end">
                <span class="level-item tag">3</span>
            </span>
        </a></li><li>
        <a class="level is-marginless" href="/mystudy/categories/shade学习/">
            <span class="level-start">
                <span class="level-item">shade学习</span>
            </span>
            <span class="level-end">
                <span class="level-item tag">33</span>
            </span>
        </a></li><li>
        <a class="level is-marginless" href="/mystudy/categories/xlua/">
            <span class="level-start">
                <span class="level-item">xlua</span>
            </span>
            <span class="level-end">
                <span class="level-item tag">1</span>
            </span>
        </a></li><li>
        <a class="level is-marginless" href="/mystudy/categories/网络同步/">
            <span class="level-start">
                <span class="level-item">网络同步</span>
            </span>
            <span class="level-end">
                <span class="level-item tag">10</span>
            </span>
        </a></li><li>
        <a class="level is-marginless" href="/mystudy/categories/设计模式/">
            <span class="level-start">
                <span class="level-item">设计模式</span>
            </span>
            <span class="level-end">
                <span class="level-item tag">5</span>
            </span>
        </a></li>
            </ul>
        </div>
    </div>
</div>
    
        <div class="card widget">
    <div class="card-content">
        <div class="menu">
        <h3 class="menu-label">
            归档
        </h3>
        <ul class="menu-list">
        
        <li>
            <a class="level is-marginless" href="/mystudy/archives/2020/09/">
                <span class="level-start">
                    <span class="level-item">九月 2020</span>
                </span>
                <span class="level-end">
                    <span class="level-item tag">1</span>
                </span>
            </a>
        </li>
        
        <li>
            <a class="level is-marginless" href="/mystudy/archives/2020/07/">
                <span class="level-start">
                    <span class="level-item">七月 2020</span>
                </span>
                <span class="level-end">
                    <span class="level-item tag">23</span>
                </span>
            </a>
        </li>
        
        <li>
            <a class="level is-marginless" href="/mystudy/archives/2020/06/">
                <span class="level-start">
                    <span class="level-item">六月 2020</span>
                </span>
                <span class="level-end">
                    <span class="level-item tag">17</span>
                </span>
            </a>
        </li>
        
        <li>
            <a class="level is-marginless" href="/mystudy/archives/2020/03/">
                <span class="level-start">
                    <span class="level-item">三月 2020</span>
                </span>
                <span class="level-end">
                    <span class="level-item tag">2</span>
                </span>
            </a>
        </li>
        
        <li>
            <a class="level is-marginless" href="/mystudy/archives/2020/02/">
                <span class="level-start">
                    <span class="level-item">二月 2020</span>
                </span>
                <span class="level-end">
                    <span class="level-item tag">4</span>
                </span>
            </a>
        </li>
        
        <li>
            <a class="level is-marginless" href="/mystudy/archives/2019/09/">
                <span class="level-start">
                    <span class="level-item">九月 2019</span>
                </span>
                <span class="level-end">
                    <span class="level-item tag">5</span>
                </span>
            </a>
        </li>
        
        <li>
            <a class="level is-marginless" href="/mystudy/archives/2019/08/">
                <span class="level-start">
                    <span class="level-item">八月 2019</span>
                </span>
                <span class="level-end">
                    <span class="level-item tag">18</span>
                </span>
            </a>
        </li>
        
        </ul>
        </div>
    </div>
</div>
    
        
<div class="card widget">
    <div class="card-content">
        <h3 class="menu-label">
            标签云
        </h3>
        <a href="/mystudy/tags/game/" style="font-size: 15px;">game</a> <a href="/mystudy/tags/git/" style="font-size: 10px;">git</a> <a href="/mystudy/tags/学习/" style="font-size: 20px;">学习</a>
    </div>
</div>

    
    
        <div class="column-right-shadow is-hidden-widescreen is-sticky">
        
            
<div class="card widget" id="toc">
    <div class="card-content">
        <div class="menu">
            <h3 class="menu-label">
                目录
            </h3>
            <ul class="menu-list"><li>
        <a class="is-flex" href="#Unity中的基础光照">
        <span class="has-mr-6">1</span>
        <span>Unity中的基础光照</span>
        </a></li><li>
        <a class="is-flex" href="#如何看到这个世界">
        <span class="has-mr-6">2</span>
        <span>如何看到这个世界</span>
        </a></li><li>
        <a class="is-flex" href="#漫反射">
        <span class="has-mr-6">3</span>
        <span>漫反射</span>
        </a></li><li>
        <a class="is-flex" href="#高光反射">
        <span class="has-mr-6">4</span>
        <span>高光反射</span>
        </a></li><li>
        <a class="is-flex" href="#光照模型">
        <span class="has-mr-6">5</span>
        <span>光照模型</span>
        </a><ul class="menu-list"><li>
        <a class="is-flex" href="#1-1-标准光照模型">
        <span class="has-mr-6">5.1</span>
        <span>1.1 标准光照模型</span>
        </a></li><li>
        <a class="is-flex" href="#1-2-环境光">
        <span class="has-mr-6">5.2</span>
        <span>1.2 环境光</span>
        </a></li><li>
        <a class="is-flex" href="#1-3-漫反射">
        <span class="has-mr-6">5.3</span>
        <span>1.3 漫反射</span>
        </a><ul class="menu-list"><li>
        <a class="is-flex" href="#1-Lambert模型">
        <span class="has-mr-6">5.3.1</span>
        <span>1. Lambert模型</span>
        </a></li><li>
        <a class="is-flex" href="#2-HalfLambert模型">
        <span class="has-mr-6">5.3.2</span>
        <span>2. HalfLambert模型</span>
        </a></li></ul></li><li>
        <a class="is-flex" href="#1-4-高光反射">
        <span class="has-mr-6">5.4</span>
        <span>1.4 高光反射</span>
        </a><ul class="menu-list"><li>
        <a class="is-flex" href="#1-Phone模型">
        <span class="has-mr-6">5.4.1</span>
        <span>1. Phone模型</span>
        </a></li><li>
        <a class="is-flex" href="#2-Blinn-Phone模型">
        <span class="has-mr-6">5.4.2</span>
        <span>2. Blinn-Phone模型</span>
        </a></li></ul></li></ul></li></ul>
        </div>
    </div>
</div>

        
        </div>
    
</div>

                




<div class="column is-4-tablet is-4-desktop is-3-widescreen is-hidden-touch is-hidden-desktop-only has-order-3 column-right is-sticky">
    
        
<div class="card widget" id="toc">
    <div class="card-content">
        <div class="menu">
            <h3 class="menu-label">
                目录
            </h3>
            <ul class="menu-list"><li>
        <a class="is-flex" href="#Unity中的基础光照">
        <span class="has-mr-6">1</span>
        <span>Unity中的基础光照</span>
        </a></li><li>
        <a class="is-flex" href="#如何看到这个世界">
        <span class="has-mr-6">2</span>
        <span>如何看到这个世界</span>
        </a></li><li>
        <a class="is-flex" href="#漫反射">
        <span class="has-mr-6">3</span>
        <span>漫反射</span>
        </a></li><li>
        <a class="is-flex" href="#高光反射">
        <span class="has-mr-6">4</span>
        <span>高光反射</span>
        </a></li><li>
        <a class="is-flex" href="#光照模型">
        <span class="has-mr-6">5</span>
        <span>光照模型</span>
        </a><ul class="menu-list"><li>
        <a class="is-flex" href="#1-1-标准光照模型">
        <span class="has-mr-6">5.1</span>
        <span>1.1 标准光照模型</span>
        </a></li><li>
        <a class="is-flex" href="#1-2-环境光">
        <span class="has-mr-6">5.2</span>
        <span>1.2 环境光</span>
        </a></li><li>
        <a class="is-flex" href="#1-3-漫反射">
        <span class="has-mr-6">5.3</span>
        <span>1.3 漫反射</span>
        </a><ul class="menu-list"><li>
        <a class="is-flex" href="#1-Lambert模型">
        <span class="has-mr-6">5.3.1</span>
        <span>1. Lambert模型</span>
        </a></li><li>
        <a class="is-flex" href="#2-HalfLambert模型">
        <span class="has-mr-6">5.3.2</span>
        <span>2. HalfLambert模型</span>
        </a></li></ul></li><li>
        <a class="is-flex" href="#1-4-高光反射">
        <span class="has-mr-6">5.4</span>
        <span>1.4 高光反射</span>
        </a><ul class="menu-list"><li>
        <a class="is-flex" href="#1-Phone模型">
        <span class="has-mr-6">5.4.1</span>
        <span>1. Phone模型</span>
        </a></li><li>
        <a class="is-flex" href="#2-Blinn-Phone模型">
        <span class="has-mr-6">5.4.2</span>
        <span>2. Blinn-Phone模型</span>
        </a></li></ul></li></ul></li></ul>
        </div>
    </div>
</div>

    
    
</div>

            </div>
        </div>
    </section>
    <footer class="footer">
    <div class="container1">
        <div class="level1">
            <div class="level-start1 has-text-centered-mobile1">
                <a class="footer-logo is-block has-mb-6" href="/mystudy/">
                

                
                </a>
                <p class="is-size-7">
                &copy; 2020 Koliy&nbsp;
                Powered by <a href="https://github.com/koliy/koliy.github.io" target="_blank">Hexo</a> & <a
                        href="https://github.com/ppoffice/hexo-theme-icarus" target="_blank">Icarus</a>
                
                <br>
                <span id="busuanzi_container_site_uv">
                共<span id="busuanzi_value_site_uv">0</span>个访客
                </span>
                
                </p>
            </div>
            <div class="level-end1">
            
            </div>
        </div>
    </div>
</footer>
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.3.1/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/moment@2.22.2/min/moment-with-locales.min.js"></script>
<script>moment.locale("zh-CN");</script>

<script>
var IcarusThemeSettings = {
    article: {
        highlight: {
            clipboard: true,
            fold: 'unfolded'
        }
    }
};
</script>


    <script src="https://cdn.jsdelivr.net/npm/clipboard@2.0.4/dist/clipboard.min.js" defer></script>



    
    
    
    <script src="/mystudy/js/animation.js"></script>
    

    
    
    
    <script src="https://cdn.jsdelivr.net/npm/lightgallery@1.6.8/dist/js/lightgallery.min.js" defer></script>
    <script src="https://cdn.jsdelivr.net/npm/justifiedGallery@3.7.0/dist/js/jquery.justifiedGallery.min.js" defer></script>
    <script src="/mystudy/js/gallery.js" defer></script>
    

    
    

<div id="outdated">
    <h6>Your browser is out-of-date!</h6>
    <p>Update your browser to view this website correctly. <a id="btnUpdateBrowser" href="http://outdatedbrowser.com/">Update
            my browser now </a></p>
    <p class="last"><a href="#" id="btnCloseUpdateBrowser" title="Close">&times;</a></p>
</div>
<script src="https://cdn.jsdelivr.net/npm/outdatedbrowser@1.1.5/outdatedbrowser/outdatedbrowser.min.js" defer></script>
<script>
    document.addEventListener("DOMContentLoaded", function () {
        outdatedBrowser({
            bgColor: '#f25648',
            color: '#ffffff',
            lowerThan: 'flex'
        });
    });
</script>


    
    
<script src="https://cdn.jsdelivr.net/npm/mathjax@2.7.5/unpacked/MathJax.js?config=TeX-MML-AM_CHTML" defer></script>
<script>
document.addEventListener('DOMContentLoaded', function () {
    MathJax.Hub.Config({
        'HTML-CSS': {
            matchFontHeight: false
        },
        SVG: {
            matchFontHeight: false
        },
        CommonHTML: {
            matchFontHeight: false
        },
        tex2jax: {
            inlineMath: [
                ['$','$'],
                ['\\(','\\)']
            ]
        }
    });
});
</script>

    
    

<a id="back-to-top" title="回到顶端" href="javascript:;">
    <i class="fas fa-chevron-up"></i>
</a>
<script src="/mystudy/js/back-to-top.js" defer></script>


    
    

    
    
    
    

    
    
    
    
    

    


<script src="/mystudy/js/main.js" defer></script>

    
    <div class="searchbox ins-search">
    <div class="searchbox-container ins-search-container">
        <div class="searchbox-input-wrapper">
            <input type="text" class="searchbox-input ins-search-input" placeholder="想要查找什么..." />
            <span class="searchbox-close ins-close ins-selectable"><i class="fa fa-times-circle"></i></span>
        </div>
        <div class="searchbox-result-wrapper ins-section-wrapper">
            <div class="ins-section-container"></div>
        </div>
    </div>
</div>
<script>
    (function (window) {
        var INSIGHT_CONFIG = {
            TRANSLATION: {
                POSTS: '文章',
                PAGES: '页面',
                CATEGORIES: '分类',
                TAGS: '标签',
                UNTITLED: '(无标题)',
            },
            CONTENT_URL: '/mystudy/content.json',
        };
        window.INSIGHT_CONFIG = INSIGHT_CONFIG;
    })(window);
</script>
<script src="/mystudy/js/insight.js" defer></script>
<link rel="stylesheet" href="/mystudy/css/search.css">
<link rel="stylesheet" href="/mystudy/css/insight.css"><!-- hexo-inject:begin --><!-- Begin: Injected MathJax -->
<script type="text/x-mathjax-config">
  MathJax.Hub.Config({"tex2jax":{"inlineMath":[["$","$"],["\\(","\\)"]],"skipTags":["script","noscript","style","textarea","pre","code"],"processEscapes":true},"TeX":{"equationNumbers":{"autoNumber":"AMS"}}});
</script>

<script type="text/x-mathjax-config">
  MathJax.Hub.Queue(function() {
    var all = MathJax.Hub.getAllJax(), i;
    for(i=0; i < all.length; i += 1) {
      all[i].SourceElement().parentNode.className += ' has-jax';
    }
  });
</script>

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js">
</script>
<!-- End: Injected MathJax -->
<!-- hexo-inject:end -->
    
</body>
</html>